<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding: 0;}
			li{list-style: none;}
			html,body{height: 100%;}
			body{perspective: auto;}/*设置3D景深*/
			.box1{
				width:200px;
				height:200px;
				position: absolute;
				left: 0;right: 0;top: 0;bottom: 0;margin: auto;/*使ul在屏幕正中的位置*/
				background: rgba(244,4,253,0.3);/*给ul一个紫色透明的背景*/
				transform-style:preserve-3d;/*定义ul的样式为3D属性*/
				animation: box 10s 0.3s linear infinite;
				
				}
			li{
				width: 200px;
				height: 200px;
				position: absolute;left: 0;top: 0;
				font:50px/200px "微软雅黑";
				color: white;
				text-align: center;
				}	
			li:nth-child(1){
				transform: translateZ(0px);background:#ff0;opacity: 0.6;
				animation: front 2s linear forwards;
			}
			li:nth-child(2){
				transform: translateZ(0px) rotateY(0deg);opacity: 0.6;
				background: #330;
				animation: back 2s 2s linear forwards;
			}
			li:nth-child(3){
				background: #f00;opacity: 0.6;
				transform: translateX(0px) rotateY(0deg);
				
				animation: left 2s 4s linear forwards;
			}
			li:nth-child(4){
				background: #0f0;opacity: 0.6;
				transform: translateX(0px) rotateY(0deg);
			
				animation: right 2s 6s linear forwards;
			}
			li:nth-child(5){
				background: #0ff;opacity: 0.6;
				transform: translateY(0px) rotateX(0deg);
			
				animation: top 2s 8s linear forwards;
			}
			li:nth-child(6){
				background: #00f;opacity: 0.6;
				transform: translateY(0px) rotateX(0deg);
			
				animation: bottom 2s 10s linear forwards;
			}
			
			ul{transform: rotateY(50deg) rotateX(30deg)}
			/*@keyframes box{
				0%{transform: rotateY(0deg) rotateX(0deg);}
				
				100%{transform: rotate3D(0.5,0.5,0.5,360deg);}
				
				
			}*/
			@keyframes front{
				0%{transform: translateZ(0px);background:#ff0;opacity: 0.6;}
				100%{transform: translateZ(100px);background: #ff0;}
				}
				
				/*10%{transform: translateZ(100px);}
				50%{transform: translateZ(200px);}
				60%{transform: translateZ(200px);}
				90%{transform: translateZ(100px);}*/
						@keyframes back{
							0%{background: #330;
				transform: translateZ(0px) rotateY(0deg);}
				100%{background: #330;
				transform: translateZ(-100px) rotateY(180deg);}
				/*10%{transform: translateZ(-100px) rotateY(180deg);}
				50%{transform: translateZ(-200px) rotateY(180deg);}
				60%{transform: translateZ(-200px) rotateY(180deg);}
				90%{transform: translateZ(-100px) rotateY(180deg);}*/
			}
			@keyframes left{
				0%{background: #f00;opacity: 0.6;
				transform: translateX(0px) rotateY(0deg);}
				100%{background: #f00;
				transform: translateX(-100px) rotateY(-90deg);}
				
			}
			@keyframes right{
				0%{background: #0f0;opacity: 0.6;
				transform: translateX(0px) rotateY(0deg);}
				100%{background: #0f0;opacity: 0.6;
				transform: translateX(100px) rotateY(90deg);}
			}
			@keyframes top{
				0%{background: #0ff;opacity: 0.6;
				transform: translateY(0px) rotateX(0deg);}
				100%{background: #0ff;opacity: 0.6;
				transform: translateY(-100px) rotateX(90deg);}
			}
			@keyframes bottom{
				0%{background: #00f;opacity: 0.6;
				transform: translateY(0px) rotateX(0deg);}
				100%{background: #00f;opacity: 0.6;
				transform: translateY(100px) rotateX(-90deg);}
			}
			.box1:hover{
				animation-play-state: paused;
			}
			.box1:hover>li{
				animation-play-state: paused;
			}
			
		</style>
	</head>
	<body>
		<ul class="box1">
				<li>前</li>
				<li>后</li>
				<li>左</li>
				<li>右</li>
				<li>上</li>
				<li>下</li>		
		</ul>
	</body>
</html>
